<template>
  <div class="time">
    <img src="@/assets/pic/left.png">
    <div class="timeShow">
      <p class="timeTop">{{ nowTime.substr(0,8) }}</p>
      <p class="timeBottom">{{ nowTime.substr(8) }}</p>
    </div>
    <img src="@/assets/pic/right.png">
  </div>
</template>

<script>
import { parseTime } from '@/utils'
export default {
  data() {
    return {
      nowTime: parseTime(new Date(), `{h}:{i}:{s}{y}-{m}-{d}`)
    }
  },
  mounted() {
    setInterval(() => {
      this.setTime()
    }, 1000)
  },
  methods: {
    setTime() {
      this.nowTime = parseTime(new Date(), '{h}:{i}:{s}{y}-{m}-{d}')
    }
  }
}
</script>

<style lang="scss" scoped>
.time {
  display: flex;
  align-items: center;
  margin-left: 10px;
  img {
    width: 0.08rem;
    height: 0.26rem;
  }
  .timeShow {
    margin: 0 0.1rem;
    .timeTop {
      font-size: 0.2rem;
      color: #81C6F6;
    }
    .timeBottom {
      font-size: 0.15rem;
      color: #81C6F6;
    }
  }
}
@media screen and (max-width: 1400px) {
  .time {
    .timeShow {
      margin: 0 0.05rem;
      .timeTop {
        font-size: 0.18rem;
        color: #81C6F6;
      }
      .timeBottom {
        font-size: 0.12rem;
        color: #81C6F6;
      }
    }
  }
}
</style>
